<template>
  <div>
    <van-swipe class="my-swipe" :loop="false" @change="onChange">
      <van-swipe-item v-for="(itm , ind) in shoopObj" :key="ind">
        <div class="box">
          <div v-for="(item , index) in itm" :key="index" class="qg" @click="skip(item.id)">
            <img :src="item.imgurl" alt />
            <p class="title van-multi-ellipsis--l2">{{item.title}}</p>
            <p class="pirce">￥{{item.newPrice}}</p>
          </div>
        </div>
      </van-swipe-item>

      <van-swipe-item class="my-swipe" :loop="false" @change="onChange">
        <div class="loding">
          <van-loading type="spinner" color="#1989fa" />
        </div>
      </van-swipe-item>

      <template #indicator>
        <div class="custom-indicator">
          <span
            v-for="(item,index) in shoopObj"
            :key="index"
            :style="{ backgroundColor: index ==current?'red':'#ccc' }"
          ></span>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "seckill",
  props: ["options"],
  data() {
    return {
      current: 0,
      dataArr: [],
    };
  },
  methods: {
    ...mapActions("home", ["getShoop"]),
    onChange(index) {
      this.current = index;
    },
    async getdata() {
      // 获取抢购商品
      let ids = JSON.parse(this.options.sids).join(",");
      let r = await this.getShoop({ ids });
      this.dataArr = r;
    },
    skip(id) {
      this.$router.push({ path: `/detail`, query: { id, mode: 1 } });
    },
  },
  computed: {
    shoopObj() {
      let num = Math.ceil(this.dataArr.length / 8);
      let obj = {};
      for (let index = 0; index < num; index++) {
        let start = index * 8;
        let end = (index + 1) * 8;
        obj[index] = this.dataArr.slice(start, end);
      }
      return obj;
    },
  },
  mounted() {},
  watch: {
    options(e) {
      if (e.id) {
        this.getdata();
      }
    },
  },
};
</script>

<style scoped>
.custom-indicator {
  width: 3rem;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  /* background: rgba(0, 0, 0, 0.1); */
  margin: auto;
}

.custom-indicator span {
  margin-left: 10px;
  display: inline-block;
  width: 0.5rem;
  height: 0.1rem;
  background-color: red;
}

.my-swipe .van-swipe-item {
  color: #fff;
  /* font-size: 20px; */
  height: 300px;
  /* background-color: #39a9ed; */
}

.qg {
  width: 1.5rem;
  height: 2.5rem;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.qg img {
  width: 1.5rem;
  height: 1.3rem;
}

.title {
  font-size: 13px;
  padding: 0 3px;
  color: #000;
}

.pirce {
  font-size: 16px;
  color: red;
}

.box {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.loding {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>